<template>
	<view class="detail">
		<!-- 标题 -->
		<view class="header">
			{{item.name}}
		</view>
		<!-- 内容 -->
		<scroll-view scroll-y="true" class="detailScroll" >
			<!-- 商品图片 -->
			<image :src="item.listPicUrl" mode=""></image>
			<view class="tag">
				{{item.promTag}}
			</view>
			<view class="price">
				￥ {{item.retailPrice}}
			</view>
			<!-- 准备内容 -->
			<view class="list" style="margin-left: 5%; font-size: 28rpx; line-height: 50rpx;">
				<view>100%桑蚕丝填充，丝丝精粹不掺杂</view>
				<view>创新井字拉网工艺，桑蚕丝不易粘连结块</view>
				<view>两种面料可选，贡缎手感细腻，竹棉清爽透气</view>
				<view>AB双面设计，多种活性印花不易褪色</view>
				
			</view>
		</scroll-view>
		
		<!-- 底部 -->
		<view class="footer">
			<view class="img">
				<image src="http://yanxuan-static.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/detail-kefu-d10f0489d2.png?imageView&type-webp" mode=""></image>
			</view>
			<view class="btn">
				立即购买
			</view>
			<view class="btn cart" @click="addCart()">
				加入购物车
			</view>
		</view>
	</view>
</template>

<script>
	import {mapMutations} from 'vuex'
	export default {
		data() {
			return {
				item:{}
			};
		},
		onLoad(options){
			if(options){
				this.item=JSON.parse(options.goodsItem)
			}
			console.log(this.item)
		},
		methods:{
			...mapMutations('cart',['addGoodsItemMutations']),
			addCart(){
				this.addGoodsItemMutations(this.item)
				 uni.showToast({
				      title: '添加成功',
				      icon: 'success',
				      duration: 2000
				    })
			}
		}
	}
</script>

<style lang="stylus">
.detail
	.header
		height: 90rpx
		line-height: 90rpx
		text-align: center
	.detailScroll
		height: calc(100vh - 90rpx)
		image
			width: 100%
			height: 750rpx
		.tag
			width: 90%
			height: 100rpx
			background-color: #bb2c08
			text-align: center
			line-height: 100rpx
			margin: 20rpx auto
			color: #fff
			border-radius: 10rpx
			font-size: 32rpx
		.price
			font-size: 50rpx
			color: #dd1a21
			line-height: 70rpx
			margin-left: 5%
	
	.footer
		display: flex
		position: fixed
		bottom: 0
		left: 0
		height: 100rpx
		width: 100%
		line-height: 100rpx
		border-top: 2rpx solid #ccc
		.img
			flex: 1 
			image
				display: block
				width: 60rpx
				height: 60rpx
				margin: 15% auto
		.btn
			flex: 2
			text-align: center
			border-left: 2rpx solid #ccc
		.cart
			background-color: #dd1a21
			color: #fff
			 
</style>
